<template>
  <div>
    <a-row>
      <a-col :span="6" v-for="(item, index) in propsData.column" :key="index">
        <chart-card :title="`${item.name}(㎡)`">
          <vue-count-up slot="total" :start-value="0" :end-value="item.value" :decimals="2" style="color: rgba(109, 210, 48, 1)" />
        </chart-card>
      </a-col>
    </a-row>
    <echarts-view :options="option"></echarts-view>
  </div>
</template>

<script>
import {
  ChartCard
} from '@/components'
import echartsView from '@/components/ECharts'
import VueCountUp from 'vue-countupjs'
const color = [
  'rgba(84, 112, 198, 1)',
  'rgba(115, 192, 222, 1)',
  'rgba(238, 102, 102, 1)',
  'rgba(250, 200, 88, 1)',
  'rgba(145, 204, 117, 1)'
]
const formatNumber = function (num) {
  const reg = /(?=(\B)(\d{3})+$)/g
  return num.toString().replace(reg, ',')
}
export default {
  props: {
    propsData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    echartsView,
    ChartCard,
    VueCountUp
  },
  data () {
    return {
      option: {
        backgroundColor: '#fff',
        color: color,
        tooltip: {
          trigger: 'item'
        },
        title: [
          {
            text: `{name|自持房屋}\n{val|${formatNumber(this.propsData.total)}㎡}`,
            top: 'center',
            left: 'center',
            textStyle: {
              rich: {
                name: {
                  fontSize: 14,
                  fontWeight: 'normal',
                  color: '#666666',
                  padding: [10, 0]
                },
                val: {
                  fontSize: 32,
                  fontWeight: 'bold',
                  color: '#333333'
                }
              }
            }
          }
        ],
        series: [
          {
            type: 'pie',
            radius: ['45%', '60%'],
            center: ['50%', '50%'],
            data: this.propsData.pie,
            hoverAnimation: false,
            itemStyle: {
              normal: {
                borderColor: '#fff',
                borderWidth: 2
              }
            },
            labelLine: {
              normal: {
                length: 20,
                length2: 120
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  return `{icon|●}{name|${params.name}}{value|${formatNumber(params.value)}}㎡`
                },
                padding: [0, -100, 25, -100],
                rich: {
                  icon: {
                    fontSize: 16
                  },
                  name: {
                    fontSize: 14,
                    padding: [0, 10, 0, 4],
                    color: '#666666'
                  },
                  value: {
                    fontSize: 18,
                    fontWeight: 'bold',
                    color: '#333333'
                  }
                }
              }
            }
          }
        ]
      }
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/ .ant-card-body {
    padding: 6px!important;
  }
  /deep/.chart-card-content {
    height: 0;
  }
  /deep/.chart-card-footer {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
  }
  /deep/ .total {
    font-size: 18px;
  }
</style>
